<template>
  <div class="distribution_r">
    <w-breadcrumb style="font-size: 14px; margin-left: 5px" separator="/">
      <w-breadcrumb-item>订单管理</w-breadcrumb-item>
      <w-breadcrumb-item>待分配订单</w-breadcrumb-item>
    </w-breadcrumb>
    <w-tabs
      type="card"
      v-model="activeName"
      @tab-click="handleChangeTag"
      class="distri_tabs"
    >
      <w-tab-pane label="待运输" name="first">
        <w-table
          class="distri_table"
          ref="multipleTable"
          :data="
            transportList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
        >
          <w-table-column prop="id" label="订单号" width="130">
          </w-table-column>
          <w-table-column prop="sendName" label="发件人姓名" width="140">
          </w-table-column>
          <w-table-column prop="sendPhone" label="发件人手机号" width="170">
          </w-table-column>
          <w-table-column prop="receiveName" label="收件人姓名" width="140">
          </w-table-column>
          <w-table-column prop="receivePhone" label="收件人手机号" width="170">
          </w-table-column>
          <w-table-column label="操作">
            <template slot-scope="scope">
              <w-button size="mini" @click="handleEditTrans(scope.row)"
                >分配</w-button
              >
              <w-button
                size="mini"
                type="danger"
                @click="handleDetail(scope.row)"
                >详情</w-button
              >
            </template>
          </w-table-column>
        </w-table>
        <w-dialog
          style="width: 800px; margin: 20px auto; text-align: center"
          title="待运输"
          :visible.sync="transFormVisible"
          @close="closeDialog"
        >
          <w-form class="distri_form">
            <w-form-item
              style="width: 320px"
              label="运输员"
              :label-width="formLabelWidth"
            >
              <w-select v-model="selectedEid" @change="selectedCar">
                <w-option
                  
                  v-for="tP in transportPeople"
                  :key="tP.id"
                  :label="tP.name"
                  :value="tP.id"
                ></w-option>
              </w-select>
            </w-form-item>
            <w-form-item
              style="width: 320px; margin-top: 30px"
              label="运输车辆"
              :label-width="formLabelWidth"
            >
              <w-select v-model="selectedCid" :disabled="disabled">
                <w-option
                  v-for="tC in transportCar"
                  :key="tC.id"
                  :label="tC.license"
                  :value="tC.id"
                ></w-option>
              </w-select>
            </w-form-item>
          </w-form>
          <div slot="footer" class="dialog-footer">
            <w-button type="primary" @click="submitTrans()"
              >提交分配</w-button
            >
          </div>
        </w-dialog>
        <w-pagination
          class="distri_bottom"
          @current-change="current_change"
          :current-page="currentPage"
          small
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="transportList.length"
        >
        </w-pagination>
      </w-tab-pane>
      <w-tab-pane label="待派送" name="second">
        <w-table
          class="distri_table"
          ref="multipleTable"
          :data="
            deliverList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
        >
          <w-table-column prop="id" label="订单号" width="130">
          </w-table-column>
          <w-table-column prop="sendName" label="发件人姓名" width="140">
          </w-table-column>
          <w-table-column prop="sendPhone" label="发件人手机号" width="170">
          </w-table-column>
          <w-table-column prop="receiveName" label="收件人姓名" width="140">
          </w-table-column>
          <w-table-column prop="receivePhone" label="收件人手机号" width="170">
          </w-table-column>
          <w-table-column label="操作">
            <template slot-scope="scope">
              <w-button size="mini" @click="handleEditDeli(scope.row)"
                >分配</w-button
              >
              <w-button
                size="mini"
                type="danger"
                @click="handleDetail(scope.row)"
                >详情</w-button
              >
            </template>
          </w-table-column>
        </w-table>
        <w-dialog
          @close="closeDialog"
          style="width: 800px; margin: 20px auto; text-align: center"
          title="待派送"
          :visible.sync="deliFormVisible"
        >
          <w-form class="distri_deliform">
            <w-form-item
              style="width: 320px"
              label="快递员"
              :label-width="formLabelWidth"
            >
              <w-select v-model="selectedEid_deliver">
                <w-option
                  v-for="d in deliverPeople"
                  :key="d.id"
                  :label="d.name"
                  :value="d.id"
                ></w-option>
              </w-select>
            </w-form-item>
          </w-form>
          <div slot="footer" class="dialog-footer">
            <w-button type="primary" @click="submitDeli()">提交分配</w-button>
          </div>
        </w-dialog>
        <w-pagination
          class="distri_bottom"
          @current-change="current_change"
          :current-page="currentPage"
          small
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="deliverList.length"
        >
        </w-pagination>
      </w-tab-pane>
    </w-tabs>
  </div>
</template>

<script>
export default {
  name: "Distribution",
  data() {
    return {
      activeName: "first",
      currentPage: 1,
      pageSize: 6,
      formLabelWidth: "90px",
      transFormVisible: false,
      deliFormVisible: false,
      selectedOid: 0,
      selectedEid: "",
      selectedCid: "",
      deliverPeople: [],
      transportPeople: [],
      transportCar: [],
      transportList: [],
      deliverList: [],
      carList: [],
      disabled: true,
      selectedEid_deliver:''
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    async handleEditTrans(row) {
      this.selectedOid = row.id;
      await this.$axios({
        method: "GET",
        url:
          "http://1.15.170.222:88/api/order/getProper/" +
          "运输员" +
          "/" +
          this.selectedOid,
      }).then((response) => {
        console.log(response);
        this.transportPeople = response.data.data;
      });
      this.transFormVisible = true;
    },
    closeDialog(){
      this.selectedEid = '';
      this.selectedCid = '';
      this.selectedEid_deliver = '';
    },
    handleEditDeli(row) {
      this.selectedOid = row.id;
      this.$axios({
        method: "GET",
        url:
          "http://1.15.170.222:88/api/order/getProper/" +
          "快递员" +
          "/" +
          this.selectedOid,
      }).then((response) => {
        console.log(response);
        this.deliverPeople = response.data.data;
      });
      this.deliFormVisible = true;
    },
    handleDetail(row) {
      localStorage.setItem("route", this.$route.path);
      localStorage.setItem("pageNo", this.currentPage);
      localStorage.setItem("active", this.activeName);
      this.$router.push({
        name: "fenpeixiangqing",
        query: {
          id: row.id,
        },
      });
    },
    selectedCar(){
        this.$axios({
          method: "GET",
          url: "http://1.15.170.222:88/api/order/getPotentialCar/" + this.selectedEid,
        }).then((response) => {
          console.log(response);
          this.selectedCid = response.data.data
          if(this.selectedCid === null){
            this.disabled = false
            this.$axios({
              method:"GET",
              url:"http://1.15.170.222:88/api/order/getProper/" + "车辆" + "/" + this.selectedOid
            }).then((response) => {
              console.log(response);
              this.transportCar = response.data.data
            })
          }else {
            this.disabled = true
          }
        });
    },
    async submitTrans(){
      await this.$axios({
        method: "GET",
        url:
          "http://1.15.170.222:88/api/order/allocateCourier/" +
          this.selectedOid +
          "/" +
          this.selectedEid,
      }).then((response) => {
        console.log(response);
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/order/getOrdersWaitingDriver",
      }).then((response) => {
        console.log(response);
        this.transportList = response.data.data;
         this.$alert("分配成功", "提示", {
            confirmButtonText: "确定",
          });
          this.selectedEid = '';
          this.selectedCid = '';
          this.disabled = true
      });
      this.transFormVisible = false
    },
    async submitDeli() {
      await this.$axios({
        method: "GET",
        url:
          "http://1.15.170.222:88/api/order/allocateCourier/" +
          this.selectedOid +
          "/" +
          this.selectedEid_deliver,
      }).then((response) => {
        console.log(response);
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/order/getOrdersWaitingCourier",
      }).then((response) => {
        console.log(response);
        this.deliverList = response.data.data;
         this.$alert("分配成功", "提示", {
            confirmButtonText: "确定",
          });
          this.selectedEid_deliver = ''
      });
      this.deliFormVisible = false;
    },
    handleChangeTag() {
      localStorage.removeItem("active");
      localStorage.removeItem("pageNo");
      localStorage.removeItem("route");
      this.currentPage = 1;
      // console.log(this.activeName);
    },
  },
  mounted() {
    this.$axios({
      method: "GET",
      url: "http://1.15.170.222:88/api/order/getOrdersWaitingDriver",
    }).then((response) => {
      console.log(response);
      this.transportList = response.data.data;
    });
    this.$axios({
      method: "GET",
      url: "http://1.15.170.222:88/api/order/getOrdersWaitingCourier",
    }).then((response) => {
      console.log(response);
      this.deliverList = response.data.data;
    });
      
      if(this.deliFormVisible === false){
        this.selectedEid_deliver = ''
      } 
  },
  created() {
    let pageNo = localStorage.getItem("pageNo");
    let route = localStorage.getItem("route");
    let active = localStorage.getItem("active");
    if (route === this.$route.path && active === "second") {
      this.currentPage = Number(pageNo);
      this.activeName = "second";
    } else if (route === this.$route.path && active === "first") {
      this.currentPage = Number(pageNo);
      this.activeName = "first";
    }
    localStorage.removeItem("pageNo");
    localStorage.removeItem("route");
    localStorage.removeItem("active");
  },
};
</script>

<style>
.distribution_r {
  padding-top: 40px;
  padding-left: 83px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.distri_tabs {
  margin-top: 30px;
}
.distri_table {
  margin-bottom: 30px;
  font-size: 14px;
  margin-left: 10px;
}
.distri_bottom {
  text-align: center;
}
.distri_form {
  padding: 30px 10px;
  height: 180px;
}
.distri_deliform {
  height: 100px;
  padding: 30px 0;
}
</style>
